<template>
    <div v-v-loading="loading">
        <el-form label-width="110px" style="margin-top: 30px;">
            <el-form-item label="附件管理" prop="userName" v-if="edit">
                <FileUpload v-model="annexPopInfo.list" :limit="1"
                    :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'png', 'jpg', 'jpeg', 'mp4']" />
            </el-form-item>
            <el-form-item :label="edit ? '当前附件' : ''" prop="">
                <div class="flex-flow" v-if="annexPopInfo.files.length > 0">
                    <div class="annex-item" v-for="(item, idx) in annexPopInfo.files" :key="idx">
                        <div class="item" v-if="item.type == 'img'">
                            <el-image class="img" :src="item.url" :preview-src-list="[item.url]" />
                        </div>
                        <div class="item" v-if="item.type == 'video'">
                            <Video :src="item.url"></Video>
                        </div>
                        <div class="item" v-if="item.type == 'doc'">

                        </div>
                    </div>
                </div>
                <div v-else class="no-data-tag">暂无附件</div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {
    apiGetAnnex,
} from "@/api/detection";

const loading = ref(false)
const annexPopInfo = ref({
    files: [],
    list: [],
})

const props = defineProps({
    infoId: {
        type: Number,
        default: 0
    },
    edit: {
        type: Boolean,
        default: false
    },
});

const setInfo = () => {
    loading.value = true
    annexPopInfo.value.files = []
    annexPopInfo.value.list = []
    apiGetAnnex(props.infoId).then(res => {
        loading.value = false
        if (res.data) {
            let result = []
            res.data.map(item => {
                let type = item.substring(item.lastIndexOf('\.') + 1, item.length)
                if (type == 'png' || type == 'jpg' || type == 'jpge') {
                    type = 'img'
                } else if (type == 'mp4') {
                    type = 'video'
                } else {
                    type = 'doc'
                }
                if (item.indexOf('/') !== 0) {
                    item = '/' + item
                }
                result.push({
                    url: import.meta.env.VITE_PIC_BASE_API + item,
                    type
                })
            })
            annexPopInfo.value.id = props.infoId
            annexPopInfo.value.files = result
        }
    }).catch(err => {
        loading.value = false
    })
}

setInfo()

watch(() => props.infoId, val => {
    setInfo()
})

</script>

<style lang="scss" scoped>
.no-data-tag {
    padding: 20px;
    font-size: 14px;
    color: #000;
    text-align: center;
}
</style>